<template>
  <div>
    <!--头部-->
    <header class="publicHeader">
      <h1>超市订单管理系统</h1>
      <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> 系统管理员</span> , 欢迎你！</p>
        <a href="jsp/logout.do">退出</a>
      </div>
    </header>
    <!--时间-->
    <section class="publicTime">
      <span id="time">2015年1月1日 11:11  星期一</span>
      <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian ">
      <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
          <ul class="list">
            <li><a href="jsp/bill.do?method=query">订单管理</a></li>
            <li><a href="#/providerManager">供应商管理</a></li>
            <li><a href="#/userManager">用户管理</a></li>
            <li><a href="#/changePassword">密码修改</a></li>
            <li><a href="jsp/logout.do">退出系统</a></li>
          </ul>
        </nav>
      </div>
      <input type="hidden" id="path" name="path" value="/SMBMS"/>
      <input type="hidden" id="referer" name="referer" value="http://localhost:8080jsp/user.do?method=query"/>
      <div class="right">
        <div class="location">
          <strong>你现在所在的位置是:</strong>
          <span>密码修改页面</span>
        </div>
        <div class="providerAdd">
          <!--div的class 为error是验证错误，ok是验证成功-->
          <div class="info"></div>
          <div class="">
            <label for="oldPassword">旧密码：</label>
            <input type="password" name="oldpassword" v-model="oldPass" @blur="checkOldPass" id="oldpassword" value="">
            <font color="red"></font>
          </div>
          <div>
            <label for="newPassword">新密码：</label>
            <input type="password" name="newpassword" v-model="newPass1" @blur="checkNewPass" id="newpassword" value="">
            <font color="red"></font>
          </div>
          <div>
            <label for="reNewPassword">确认新密码：</label>
            <input type="password" name="rnewpassword" v-model="newPass2" @blur="checkNewPass" id="rnewpassword"
                   value="">
            <font color="red"></font>
          </div>
          <div class="providerAddBtn">
            <!--<a href="#">保存</a>-->
            <input type="button" name="save" id="save" @click="changePass" value="保存" class="input-button">
          </div>
        </div>
      </div>
    </section>


    <footer class="footer">
      版权归关老师
    </footer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserUpdatePassword",
  data() {
    return {
      uid: 0,
      oldPass: '',
      newPass1: '',
      newPass2: '',
      b1: false,  // 旧密码是否正确
      b2: false // 两次新密码是否正确
    }
  },
  methods: {
    checkOldPass() {
      let _this = this;
      axios.get('/api/smbms-user/user/oldpass/' + this.oldPass, {
        headers: {
          token: window.localStorage.getItem('token')
        }
      }).then((response) => {
        if (response.data.success) {
          _this.b1 = true
          _this.uid = response.data.data
        } else {
          _this.b1 = false
        }
      })
    },
    checkNewPass() {
      if (this.newPass1 === this.newPass2) {
        this.b2 = true
      } else {
        this.b2 = false
      }
    },
    changePass() {
      let _this = this;
      if (this.b1 && this.b2) {
        axios.get('/api/smbms-user/user/change/' + this.uid + '/' + this.newPass1,{
          headers: {
            token: window.localStorage.getItem('token')
          }
        })
            .then((response) => {
              if (response.data.success) {
                _this.$router.push('login')
                window.localStorage.removeItem('token')
              }
            })
      }
    }
  }
}
</script>

<style lang="css">
/*引入外部css文件*/
@import url('../assets/css/style.css');
@import url('../assets/css/public.css');
</style>